<template>
  <div class="myfooter">
    <div class="my-footer">
      <div class="footer-left">
        <div class="logo">
          <img
            class="logot"
            src="../../public/img/logo/logo2_footer.png"
            alt=""
          />
          <span class="jies"
            >现在获得喘息空间，我们将在另一年延长您的任期。</span
          >
          <div class="xicon">
            <img src="../../public/img/icon/facebook-fill.png" alt="" />
            <img src="../../public/img/icon/xiangji.png" alt="" />
            <img src="../../public/img/icon/linying.png" alt="" />
            <img src="../../public/img/icon/radio.png" alt="" />
          </div>
        </div>
      </div>
      <div class="footer-center">
        <h2>图书类别</h2>
        <div class="footer-xia">
          <div class="footer-center-left">
            <ul>
              <li><a href="">历史</a></li>
              <li><a href="">自传</a></li>
              <li><a href="">红色血脉</a></li>
            </ul>
          </div>
          <div class="footer-center-center">
            <ul>
              <li><a href="">爱情</a></li>
              <li><a href="">恐怖</a></li>
              <li><a href="">科幻小说</a></li>
            </ul>
          </div>
          <div class="footer-center-reigth">
            <ul>
              <li><a href="">商业</a></li>
              <li><a href="">专业</a></li>
              <li><a href="">星座占星</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-reigth">
        <h2>网站地图</h2>
        <div class="footer-reigth-reight">
          <ul>
            <li><a href="">首页</a></li>
            <li><a href="">购物车</a></li>
            <li><a href="">评论</a></li>
          </ul>
        </div>
      </div>
      <p class="p">版权所有&copy;2022保留所有权利book</p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.myfooter {
  width: 100%;
  height: 500px;
  background-color: rgb(247, 232, 223);
  // position: fixed;
  // bottom: 0;

  .my-footer {
    width: 1269px;
    height: 200px;
    // background-color: aquamarine;
    margin: auto;
    z-index: 10;
    display: flex;
    padding-top: 280px;
    position: relative;

    .p {
      height: 30px;
      width: 280px;
      position: absolute;
      bottom: -20px;
      font-size: 16px;
      margin-left: 520px;
      // background-color: aqua;
    }

    .logo {
      position: absolute;
      width: 250px;
      .logot {
        margin-right: 210px;
      }
    }
    .jies {
      margin-top: 20px;
      display: block;
      width: 350px;
      // background-color: aquamarine;
      font-size: 18px;
      text-align: left;
    }
    .footer-left {
      width: 30%;
      height: 100%;
      // background-color: blueviolet;

      .xicon {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        // background-color: azure;
        margin-top: 25px;
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
    .footer-center {
      width: 40%;
      // background-color: cornflowerblue;
      height: 200px;
      h2 {
        text-align: left;
        font-size: 18px;
        font-weight: 600;
      }
      .footer-xia {
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        margin-top: 40px;
        a {
          display: block;
          margin-bottom: 30px;
          text-align: left;
          text-decoration: underline;
        }
        a:hover{
          color: red;
        }
      }
    }
    .footer-reigth {
      padding-left: 80px;
      width: 20%;
      // background-color: crimson;
      height: 200px;

      h2 {
        text-align: left;
        font-size: 18px;
        font-weight: 600;
      }
      .footer-reigth-reight {
        margin-top: 40px;
        a {
          display: block;
          margin-bottom: 30px;
          text-align: left;
          text-decoration: underline;
          font-size: 18px;
        }
         a:hover{
          color: red;
        }
      }
    }
  }
}
</style>
